<template>
    <div class="category-big-box">
        <div class="hotnews-box">
            <!-- <div class="hot-box">
                <img src="../../public/images/rd.png" alt="热点" style="width: 60px;" />
                <span class="text">热点</span>
            </div>
            <div class="news-box">
                <img src="../../public/images/news.png" alt="新闻" style="width: 60px;" />
                <span class="text">新闻</span>
            </div> -->
            <div>
              <video autoplay muted loop style="width: 270px;height: 150px;">
                <source src="../../public/video/DynamicGraph02.mp4" type="video/mp4">
              </video>
            </div>
            <div style="width: 2px; height: 150px;background-color: black;margin-left: 10px;"></div>
            <div>
              <img />
            </div>
        </div>
        <div class="category-box">
          <video autoplay muted loop style="width: 100px;height: 50px;margin-left: 0px;">
                <source src="../../public/video/DynamicGraph01.mp4" type="video/mp4">
              </video>
            <div class="button-row1">
                <button v-for="(button, index) in buttons.slice(0, 10)" :key="index" class="btn">
                {{ button.text }} <!-- 动态绑定不同的文字 -->
                </button>
            </div>
    <!-- 第二行按钮 -->
            <div class="button-row2">
                <button v-for="(button, index) in buttons.slice(10, 20)" :key="index + 10" class="btn">
                {{ button.text }} <!-- 动态绑定不同的文字 -->
            </button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'ButtonGrid',
  data() {
    return {
      // 用于生成 20 个按钮
      buttons: [
        {text:'主旋律'},{text:'喜剧'},{text:'爱情'},{text:'都市'},{text:'乡村'},{text:'青春'},{text:'谍战'},{text:'刑侦'},{text:'悬疑'},{text:'武侠'},
        {text:'动作'},{text:'科幻'},{text:'惊悚'},{text:'历史'},{text:'军事'},{text:'职场'},{text:'年代'},{text:'公益'},{text:'商战'},{text:'古装'},
      ]
    };
  }
};</script>
<style scoped>
.category-big-box {
    width: 100%;
    height: 150px;
    /* background-color: rgb(127, 255, 150); */
    display: flex;
    margin-top: 30px;
    /* position: absolute; */
}
.hotnews-box {
    width: 20%;
    height: 150px;
    /* background-color: red; */
    display: flex;
}

.text {
  font-size: 16px;
  font-weight: bold;
  color: #333; /* 字体颜色 */
}
.category-box {
    width: 80%;
    height: 150px;
    /* background-color: green; */
    float: right;
}
.button-row1 {
  display: flex;
  justify-content: space-around; /* 按钮均匀分布 */
  width: 100%; /* 确保按钮在行内均匀分布 */
  margin-top: 5px;
}
.button-row2 {
  display: flex;
  justify-content: space-around; /* 按钮均匀分布 */
  width: 100%; /* 确保按钮在行内均匀分布 */
  margin-top: 10px;
}

/* 按钮样式 */
.btn {
  width: 90px;
  padding: 10px 20px;
  background-color: hsl(157, 75%, 47%);
  color: rgb(97, 92, 92);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #72bdef; /* 鼠标悬停时按钮变暗 */
  color: aliceblue;
}
.text1 {  
  font-size: 50px;
  color: white; 
  text-shadow:   
    0px 0px 0px #54bedc,  
    -1px -1px 0px #83d1dd,  
    -2px -2px 1px #9caee8,  
    -3px -3px 1px #b0d5dc,  
    -4px -4px 2px #5ca8c6,  
    -5px -5px 3px #a8dcef,  
    -6px -6px 4px #f0cccc;
    margin-left: 30px;
    margin-top: 20px;  
}
.text2 {  
  font-size: 40px;
  color: white; 
  text-shadow:   
    0px 0px 0px #888,  
    -1px -1px 0px #777,  
    -2px -2px 1px #666,  
    -3px -3px 1px #555,  
    -4px -4px 2px #444,  
    -5px -5px 3px #333,  
    -6px -6px 4px #000;
    margin-left: 60px;
    margin-top: 20px;  
}
.text1:hover {
  font-size: 40px;
  color: white; 
  text-shadow:   
    0px 0px 0px #7df59f,  
    -1px -1px 0px #3eb65e,  
    -2px -2px 1px #38b140,  
    -3px -3px 1px #43925e,  
    -4px -4px 2px #57b675,  
    -5px -5px 3px #9fe8b0,  
    -6px -6px 4px #86f4a4;
    margin-left: 60px;
    margin-top: 20px;  
}
.text2:hover {  
  font-size: 50px;
  color: white; 
  text-shadow:   
    0px 0px 0px #54bedc,  
    -1px -1px 0px #83d1dd,  
    -2px -2px 1px #9caee8,  
    -3px -3px 1px #b0d5dc,  
    -4px -4px 2px #5ca8c6,  
    -5px -5px 3px #a8dcef,  
    -6px -6px 4px #f0cccc;
    margin-left: 30px;
    margin-top: 20px;  
}
</style>